<template>
  <div class="sign">
    <aside class="sign-left">
      <SignCard
        v-for="(item, index) in patientData"
        :key="item.hospitalNo"
        :info="item"
        :class="activeId === index ? 'active' : 'de-active'"
        @click="handleClickCard(index, item.hospitalNo)"
      />
    </aside>
    <section class="sign-right">
      <el-table :data="threeTestsInfo" border :header-cell-style="{background:'#e2e2e2'}">
        <el-table-column type="index" label="序号" min-width="30" align="center" />
        <el-table-column prop="addTime" label="采集时间" align="center" />
        <el-table-column prop="tempe" label="体温" align="center" />
        <el-table-column prop="pulse" label="脉搏" align="center" />
        <el-table-column prop="breath" label="呼吸" align="center" />
        <el-table-column prop="blood" label="收缩压/舒张压" align="center" />
      </el-table>
      <!-- <footer class="right-footer">
        <el-pagination
          v-model:currentPage="currentPage"
          :page-size="1"
          size="small"
          layout="total, prev, pager, next"
          :total="60"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </footer> -->
    </section>
  </div>
</template>

<script setup>
import SignCard from "./component/signCard.vue";
import {
  get_whiteboardPatientInfoByAdDate,
  get_whiteboardSanCeInfoByHospitalNo,
} from "@/apis/physical.js";
import { ref } from "vue";
let patientData = ref([
  {
    adTime: "",
    age: 0,
    bedNo: "",
    diagnosis: "",
    hospitalNo: "",
    nurName: "",
    ptnName: "",
    sex: "",
  },
]); //患者信息
let threeTestsInfo = ref([]); //患者三测信息
let activeId = ref(0);
let currentPage = ref(1);

//获取患者信息
async function get_patientData() {
  let res = await get_whiteboardPatientInfoByAdDate();
  patientData.value = res.data.patientList;
  get_threeTestsInfo(patientData.value[activeId.value].hospitalNo);
}
get_patientData();

//获取患者三测信息
async function get_threeTestsInfo(hospitalNo) {
  let res = await get_whiteboardSanCeInfoByHospitalNo({ hospitalNo });
  threeTestsInfo.value = res.data.sanCeLits;
}

function handleClickCard(id, hospitalNo) {
  activeId.value = id;
  get_threeTestsInfo(hospitalNo);
}

function handleCurrentChange() {}
function handleSizeChange() {}
</script>

<style lang="scss" scoped>
.sign {
  height: 100%;
  background: #fff;
  border-radius: 5px;
  display: flex;
  padding: 2.5vh 0.5vw;
  .sign-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  .sign-left::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
  .sign-right {
    flex: 7;
    position: relative;
    :deep(.el-table) {
      font-size: 0.8vw;
    }
    .right-footer {
      position: absolute;
      right: 38vw;
      bottom: 1vh;
    }
  }

  .de-active {
    background: #e6f2ff;
    color: #333;
  }
  .active {
    background: #619dfb;
    color: #fff;
  }
}
</style>
